<template>
  <!-- 
  目标: 动态组件使用,点击切换两个组件
  有两种使用方式
    1. 直接设置挂载点<component>  用vue内置的属性is来设置显示哪个组件
      1.1 缺点: 频繁的切换 会导致组件频繁的创建和销毁 
      1.2 解决: 把要切换的组件 缓存起来
    2. 用keep-alive 包起来要切换的组件 
      2.1 keep-alive 作用: 不会频繁的创建和销毁组件 而是激活和非激活
      2.2 如何监测组件是否被激活 补充两个钩子函数 activated  deactivated
        activated  激活时触发
        deactivated  失去激活状态触
   -->
  <div>
    <button @click="comName = 'MyName'">账号密码填写</button>
    <button @click="comName = 'MyInfo'">个人信息填写</button>

    <div style="border: 1px solid #333; padding: 10px; margin: 10px">
      <!--
      设置挂载点<component> 用vue内置的属性is来设置显示哪个组件 
      观察控制台 有无 keep-alive 标签包裹打印的结果会不同
      -->

      <!-- <component :is="comName"></component>  -->

      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
      
    </div>
  </div>
</template>

<script>
import MyInfo from '../components/01/MyInfo'
import MyName from '../components/01/MyName'
export default {
  components: {
    MyInfo,
    MyName
  },
  data() {
    return {
      comName: 'MyName'
    }
  }
}
</script>

<style>
button {
  margin-right: 15px;
}
</style>